<div class="account-main-section main-height">
        <div class="channel-content text-white">
            <h3 class="channel-content-header text-uppercase text-white">{{language=='en'?'Pay Password':''}}{{language=='zh'?'支付密码':''}}</h3>
            <!-- 设置支付密码 -->
            <div *ngIf="!isSetPayPassword" >
                <div class="text-center">
                    <div class="row" style="margin-bottom: 4%;">
                        <div class="col-md-2 col-xs-12"></div>
                        <div class="col-md-8 col-xs-12">
                            <div class="row">
                                <div class="col-md-4 col-xs-12 text-center" style="margin-top: 8px;">
                                    <label class="control-label" i18n>{{language=='en'?'login password':''}}{{language=='zh'?'登录密码':''}}：</label>
                                </div>
                                <div class="col-md-8 col-xs-6">
                                    <input class="form-control my_input" type="password" name="loginpass" [(ngModel)]="payPasswordModel.loginPassword" #loginpass="ngModel" minlength="8" placeholder="{{language=='en'?'Please enter your login password':''}}{{language=='zh'?'请输入密码':''}}" i18n-placeholder required="required"/>
                                    <div class="alert alert-danger" *ngIf="loginpass.invalid && (loginpass.dirty || loginpass.touched)">
                                        <div *ngIf="loginpass.errors.required" i18n>
                                            {{language=='en'?'Loginpsaaword is required!':''}}{{language=='zh'?'密码不能为空':''}} 
                                        </div>
                                        <div *ngIf="loginpass.errors.minlength" i18n>
                                            {{language=='en'?'Password must be at least 8 characters long.':''}}{{language=='zh'?'密码不能少于8位':''}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2 col-xs-12"></div>
                    </div>
                    <div class="row" style="margin-bottom: 4%;">
                        <div class="col-md-2 col-xs-12"></div>
                        <div class="col-md-8 col-xs-12">
                            <div class="row">
                                <div class="col-md-4 col-xs-12 text-center" style="margin-top: 8px;">
                                    <label class="control-label" i18n>{{language=='en'?'pay password':''}}{{language=='zh'?'支付密码':''}}：</label>
                                </div>
                                <div class="col-md-8 col-xs-12">
                                    <input class="form-control my_input" type="password" name="paypass" [(ngModel)]="payPasswordModel.payPassword" #paypass="ngModel" (keyup)="isSame()" minlength="8" placeholder="{{language=='en'?'please enter your pay password':''}}{{language=='zh'?'请输入您的支付密码':''}}" i18n-placeholder required="required"/>
                                    <div class="alert alert-danger" *ngIf="paypass.invalid && (paypass.dirty || paypass.touched)">
                                        <div *ngIf="paypass.errors.required" i18n>
                                            {{language=='en'?'Paypassword is required!':''}}{{language=='zh'?'支付密码不能为空':''}}
                                        </div>
                                        <div *ngIf="paypass.errors.minlength" i18n>
                                            {{language=='en'?'Password must be at least 8 characters long.':''}}{{language=='zh'?'密码长度不能少于8位':''}} 
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2 col-xs-12"></div>
                    </div>
                    <div class="row">
                        <div class="col-md-2 col-xs-12"></div>
                        <div class="col-md-8 col-xs-12">
                            <div class="row">
                                <div class="col-md-4 col-xs-12 text-center" style="margin-top: 8px; padding-left: 1px;">
                                    <label class="control-label" i18n>{{language=='en'?'repeat paypassword':''}}{{language=='zh'?'重复密码':''}}：</label>
                                </div>
                                <div class="col-md-8 col-xs-12">
                                    <input class="my_input form-control" type="password" name="repass" [(ngModel)]="payPasswordModel.repeatPassword" #repass="ngModel" (keyup)="isSame()" minlength="8" placeholder="{{language=='en'?'Please enter your paypassword again':''}}{{language=='zh'?'请再次输入支付密码':''}}" i18n-placeholder required="required"/>
                                    <div class="alert alert-danger" *ngIf="repass.invalid && (repass.touched || repass.dirty)">
                                        <div *ngIf="repass.errors.required" i18n>
                                            {{language=='en'?'Repasswprd is required!':''}}{{language=='zh'?'密码不能为空':''}}
                                        </div>
                                        <div *ngIf="repass.errors.minlength" i18n>
                                            {{language=='en'?'Password must be at least 8 characters long.':''}}{{language=='zh'?'密码长度不能少于8位':''}}
                                        </div>
                                    </div>
                                    <div class="alert alert-danger" *ngIf="!passValid" i18n>
                                        {{language=='en'?'The two input password must be consistent!':''}}{{language=='zh'?'两次输入密码不一致':''}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2 col-xs-12"></div>
                    </div>
                    <div class="row">
                        <div class="col-md-2 col-xs-12"></div>
                        <div class="col-md-8 col-xs-12">
                            <div class="row mt-50">
                                <div class="col-md-12 col-xs-12">
                                    <button class="btn btn-primary btn-block" (click)="createPayPassword(payPasswordModel.loginPassword,payPasswordModel.payPassword)" [disabled]="payPasswordModel.payPassword != payPasswordModel.repeatPassword">{{language=='en'?'Submit':''}}{{language=='zh'?'提交':''}}</button>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2 col-xs-12"></div>
                    </div>
                </div>
            </div>

            <!-- 重置或忘记密码 -->
            <div *ngIf="isSetPayPassword">
            <div class="row" style="margin-bottom: 4%;">
                <div class="col-md-2 col-xs-12"></div>
                <div class="col-md-8 col-xs-12">
                    <div class="row">
                        <div class="col-md-5 col-xs-12" style="margin-top: 8px;">
                            <label i18n>{{language=='en'?'Your Pay Password':''}}{{language=='zh'?'您的支付密码':''}}：</label>
                        </div>
                        <div class="col-md-7 col-xs-12">
                            <label style="font-size: 38px;">********</label>
                        </div>
                    </div>
                </div>
                <div class="col-md-2 col-xs-12"></div>
            </div>

            <!-- 忘记密码 -->
            <div style="margin-top: 10%" class="row">
                <div class="col-md-1 col-xs-12"></div>
                <div class="col-md-10 col-xs-12">
                    <div class="row">
                        <div class="col-md-7 col-xs-12">
                            <!-- Forget password -->
                            <a href="javascript:;" (click)="openModal(template)" style="color: #eb7c7e;" i18n>{{language=='en'?'Forget your payPassword':''}}{{language=='zh'?'忘记支付密码':''}}?</a>

                            <ng-template #template>
                            <div class="modal-header">
                                <h4 class="modal-title pull-left" i18n>{{language=='en'?'Forget Password':''}}{{language=='zh'?'忘记密码':''}}</h4>
                                <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
                                <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div class="text-center">
                                        <div class="row" style="margin-bottom: 4%;">
                                            <div class="col-md-1 col-xs-12"></div>
                                            <div class="col-md-10 col-xs-12">
                                                <div class="row">
                                                    <div class="col-md-5 col-xs-12" style="margin-top: 8px;">
                                                        <label class="control-label" i18n>{{language=='en'?'email':''}}{{language=='zh'?'邮箱':''}}：</label>
                                                    </div>
                                                    <div class="col-md-7 col-xs-6">
                                                        <input class="form-control my_input" type="text" name="myEmail" [(ngModel)]="payPasswordModel.email" #myEmail="ngModel" email='' placeholder="{{language=='en'?'Please enter your email':''}}{{language=='zh'?'请输入您的邮箱':''}}" i18n-placeholder required="required"/>
                                                        <div class="alert alert-danger" *ngIf="myEmail.invalid && (myEmail.dirty || myEmail.touched)">
                                                            <div *ngIf="myEmail.errors.required" i18n>
                                                                {{language=='en'?'Email is required!':''}}{{language=='zh'?'邮箱不能为空':''}}
                                                            </div>
                                                            <div *ngIf="!myEmail.errors.required && myEmail.errors.email" i18n>
                                                                {{language=='en'?'Invalid email!':''}}{{language=='zh'?'邮箱格式不正确':''}} 
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-1 col-xs-12"></div>
                                        </div>
                                        <div class="row">
                                                <div class="col-md-1 col-xs-12"></div>
                                                <div class="col-md-10 col-xs-12">
                                                    <div class="row mt-50">
                                                        <div class="col-md-12 col-xs-12">
                                                            <button class="btn btn-primary btn-block" (click)="forgetPayPassword(payPasswordModel.id, payPasswordModel.email)" [disabled]="myEmail.invalid || canGetemail" >{{getEmailName}}</button>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-1 col-xs-12"></div>
                                        </div>
                                        
                                    </div>
                            </div>
                            </ng-template>
                        </div>
                        <div class="col-md-5 col-xs-12">
                               <!-- Reset payPassword -->
                                <a href="javascript:;" (click)="openModal2(templateNested)" style="color: #eb7c7e;" i18n>{{language=='en'?'Reset Your payPassword':''}}{{language=='zh'?'重置支付密码':''}}?</a>

                                <ng-template #templateNested>
                                <div class="modal-header">
                                    <h4 class="modal-title pull-left" i18n>{{language=='en'?'Reset Password':''}}{{language=='zh'?'重置密码':''}}</h4>
                                    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef2.hide()">
                                    <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                        <div class="text-center">
                                                <div class="row" style="margin-bottom: 4%;">
                                                    <div class="col-md-1 col-xs-12"></div>
                                                    <div class="col-md-10 col-xs-12">
                                                        <div class="row">
                                                            <div class="col-md-5 col-xs-12" style="margin-top: 8px;">
                                                                <label class="control-label" i18n>{{language=='en'?'old password':''}}{{language=='zh'?'旧密码:':''}}：</label>
                                                            </div>
                                                            <div class="col-md-7 col-xs-6">
                                                                <input class="form-control my_input" type="password" name="oldpass" [(ngModel)]="payPasswordModel.oldpass" #oldpass="ngModel" minlength="8" placeholder="{{language=='en'?'Submit':''}}{{language=='zh'?'提交':''}}Please enter your old password" i18n-placeholder required="required"/>
                                                                <div class="alert alert-danger" *ngIf="oldpass.invalid && (oldpass.dirty || oldpass.touched)">
                                                                    <div *ngIf="oldpass.errors.required" i18n>
                                                                        {{language=='en'?'Oldpsaaword is required!':''}}{{language=='zh'?'密码不能为空':''}} 
                                                                    </div>
                                                                    <div *ngIf="oldpass.errors.minlength" i18n>
                                                                        {{language=='en'?'Password must be at least 8 characters long.':''}}{{language=='zh'?'密码长度不能少于8位':''}} 
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-1 col-xs-12"></div>
                                                </div>
                                                <div class="row" style="margin-bottom: 4%;">
                                                    <div class="col-md-1 col-xs-12"></div>
                                                    <div class="col-md-10 col-xs-12">
                                                        <div class="row">
                                                            <div class="col-md-5 col-xs-12" style="margin-top: 8px;">
                                                                <label i18n>{{language=='en'?'new password':''}}{{language=='zh'?'新密码':''}}：</label>
                                                            </div>
                                                            <div class="col-md-7 col-xs-12">
                                                                <input class="form-control my_input" type="password" name="newpass" [(ngModel)]="payPasswordModel.newpass" #newpass="ngModel" (keyup)="isPayPassSame()" minlength="8" placeholder="{{language=='en'?'please enter your password that you want to set':''}}{{language=='zh'?'请输入新密码':''}}" i18n-placeholder required="required"/>
                                                                <div class="alert alert-danger" *ngIf="newpass.invalid && (newpass.dirty || newpass.touched)">
                                                                    <div *ngIf="newpass.errors.required" i18n>
                                                                        {{language=='en'?'Newpassword is required!':''}}{{language=='zh'?'密码不能为空':''}} 
                                                                    </div>
                                                                    <div *ngIf="newpass.errors.minlength" i18n>
                                                                        {{language=='en'?'Password must be at least 8 characters long.':''}}{{language=='zh'?'密码长度不能少于8位':''}} 
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-1 col-xs-12"></div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-1 col-xs-12"></div>
                                                    <div class="col-md-10 col-xs-12">
                                                        <div class="row">
                                                            <div class="col-md-5 col-xs-12" style="margin-top: 8px;">
                                                                <label i18n>{{language=='en'?'repeat paypassword':''}}{{language=='zh'?'重复密码':''}}：</label>
                                                            </div>
                                                            <div class="col-md-7 col-xs-12">
                                                                <input class="my_input form-control" type="password" name="repass" [(ngModel)]="payPasswordModel.repass" #repass="ngModel" (keyup)="isPayPassSame()" placeholder="{{language=='en'?'Please enter your paypassword again':''}}{{language=='zh'?'请再次输入密码':''}}" i18n-placeholder required="required"/>
                                                                <div class="alert alert-danger" *ngIf="repass.invalid && (repass.touched || repass.dirty)">
                                                                </div>
                                                                <div class="alert alert-danger" *ngIf="!ispassValid" i18n>
                                                                    {{language=='en'?'The two input password must be consistent!':''}}{{language=='zh'?'两次密码输入不一致':''}}
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-1 col-xs-12"></div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-1 col-xs-12"></div>
                                                    <div class="col-md-10 col-xs-12">
                                                        <div class="row mt-50">
                                                            <div class="col-md-12 col-xs-12">
                                                                <button class="btn btn-primary btn-block" (click)="updatePayPassword(payPasswordModel.id, payPasswordModel.oldpass, payPasswordModel.newpass)" [ngClass]="{'btn-primary':(payPasswordModel.oldpass!='' && payPasswordModel.newpass!='' && payPasswordModel.newpass == payPasswordModel.repass)}" i18n>{{language=='en'?'Submit':''}}{{language=='zh'?'提交':''}}
                                                                  </button>
                                                    
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-1 col-xs-12"></div>
                                                </div>
                                            </div>
                                </div>
                                </ng-template>
                        </div>
                    </div>
                </div>
                <div class="col-md-1 col-xs-12"></div>
            </div>
        </div>
    </div>
</div>
    
    